<!--批量导入课程步骤一-->
<template>
    <a-row>
        <div class="page_title">批量导入</div>
        <div class="show_content">
          <a-steps :current="courseState.current" :style="{marginLeft:'-32%'}">
              <a-step>
                  <template slot="title">
                      步骤一
                  </template>
                  <span slot="description">上传Excel表格文件</span>
              </a-step>
              <a-step title="步骤二" description="检查Excel表格识别结果确认导入" />
          </a-steps>
          <div style="display: flex;justify-content: flex-end;width: 100%;">
              <a-button type="primary" class="button_one" @click="backPre">
                  返回上一步
              </a-button>
              <a-button type="primary" class="button_one" @click="importCourse">
                  确认导入
              </a-button>
          </div>
          <div style="margin: 1em auto; width: 100%; position: relative;min-height: 25em;">
              <a-table :data-source="courseState.courseRecord" :pagination="pagination" :rowKey="(record) => {return record.courseId}" >
                  <a-table-column width="30%" title="课程编号" data-index="code" />
                  <a-table-column width="40%" title="课程名" data-index="name" />
                  <a-table-column width="30%" key="courseId" title="操作">
                      <template slot-scope="record">
                          <span>
                                <a-popconfirm
                                        title="确认删除改课程么?"
                                        @confirm="() => deleteCourse(record.courseId)"
                                >
                                    <a href="javascript:;">删除</a>
                                </a-popconfirm>
                            <a-divider type="vertical" />
                            <a @click="() => { modalVisible = true; courseRecord = JSON.parse(JSON.stringify(record)); }">编辑</a>
                          </span>
                      </template>
                  </a-table-column>
              </a-table>
          </div>
        </div>
<!--        编辑弹窗-->
        <a-row>
            <a-modal
                    v-model="modalVisible"
                    title="修改课程信息"
                    centered
                    @ok="editCourse"
            >
                <a-row  style="text-align: left;">
                    <a-col >
                        <a-descriptions style="width: 20em;text-align: right">
                            <a-descriptions-item label="课程编号">
                                <a-input placeholder="课程编号"  v-model="courseRecord.code"/>
                            </a-descriptions-item>
                        </a-descriptions>
                    </a-col>
                    <a-col >
                        <a-descriptions style="width: 20em;text-align: right">
                            <a-descriptions-item label="课程名">
                                <a-input placeholder="课程名" v-model="courseRecord.name"/>
                            </a-descriptions-item>
                        </a-descriptions>
                    </a-col>
                </a-row>
            </a-modal>
        </a-row>
    </a-row>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        name: "BatchImportOne",
        data() {
            return {
                pagination: {}, // 配置分页配置
                courseRecord: {
                    name: '',
                    code: '',
                    courseId: ''
                }, // 存储当前编辑的课程信息
                modalVisible: false, // 是否显示编辑页面
            }
        },
        methods: {
            backPre(){ // 回到上一步
                this.$store.dispatch('course/backPre')
            },
            importCourse(){ //确认导入课程信息
                this.$store.dispatch('course/courseImport', this.accessState.token)
                .then(() => {
                    this.$message.success("导入成功");
                })
                .catch((error) => {
                    this.$message.error("未知错误" + error.msg);
                })
            },
            deleteCourse(courseId){ // 删除表格中课程的信息
                this.$store.dispatch('course/courseDelete', {courseId: courseId})
                this.initData() // 删除后重新配置分页
            },
            editCourse(){ // 编辑修改表格中的课程信息
                if(this.courseRecord.name.length === 0 || this.courseRecord.code.length === 0){
                    this.$message.error("课程名或者课程编号不能为空");
                }else{
                    this.$store.dispatch('course/courseModify', {courseRecord: this.courseRecord})
                    this.modalVisible = false
                    console.log("修改表格数据", this.courseRecord)
                }
            },
            initData(){ // 初始化分页器配置
                this.pagination = {
                    size: "small",
                    total: this.courseState.courseRecord.length,
                    showTotal: total => `共 ${total} 条`,
                    pageSizeOptions: ['5', '6', '7', '8', '9', '10'],
                    defaultPageSize: 5,
                    showSizeChanger: true,
                    showQuickJumper: true
                }
            }
        },
        computed: {
            ...mapState({ // 这个是提取store中access文件夹目录下的数据
                'courseState': 'course', // 获取store
                'accessState': 'access'
            })
        },
        created() {
            this.initData() // 调用初始化数据函数
        }
    }
</script>

<style scoped>
    .show_content{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 4em;
    }
    .page_title{
        font-weight: bolder;
        font-size: 1.5em;
        position: relative;
        text-align: left;
    }
    .button_one{
        padding: 1em 2em;
        line-height: 0em;
        font-size: 1em;
        width: 12em;
        margin: 1em;
        background: #3399ff;
    }
    #components-pagination-demo-mini .ant-pagination:not(:last-child) {
        margin-bottom: 24px;
    }

</style>
